<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text" v-model.trim="uname"/>
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model.trim.number="age"/>
    </div>
    <div>
      <span>性别:</span>
      <select v-model="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="add">添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-for="(item,index) in arr" :key="item.uname">
         <tr >
          <td>{{index+1}}</td>
          <td>{{item.uname}}</td>
          <td>{{item.age}}</td>
          <td>{{item.gender}}</td>
           <td>
            <button @click="del(item.uname)">删除</button>
            <button @click="change(index)">编辑</button>
          </td>
        </tr>
      </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      arr:[
      {
        uname:"劳作栋",
        age:18,
        gender:"男",
      },
       {
        uname:"丁正展",
        age:18,
        gender:"男",
      },{
        uname:"陈永正和",
        age:18,
        gender:"男",
      },
    ],
    uname:'',
    age:'',
    gender:'',
    flag:false,
    index:''
    }

  },
  methods:{
    add(){
      if (this.flag) {
        const obj1={
        uname:this.uname,
        age:this.age,
        gender:this.gender,
      }
      this.arr[this.index]=obj1
      console.log(this.arr);
      this.flag=false
      this.uname=''
      this.age=''
      this.gender=''
      }else{
        if(this.name===''||this.age===''||this.gender===''){
        return alert("请输入有效数据")
      }else{
        const obj={
        uname:this.uname,
        age:this.age,
        gender:this.gender,
      }
      this.arr.push(obj)
      this.uname=''
      this.age=''
      this.gender=''
      }
      }
     
    
      
      
    },
    del(n){
      this.arr =this.arr.filter(item=>{return item.uname!==n})
    },
    change(index){
      this.uname=this.arr[index].uname
      this.age=this.arr[index].age
      this.gender=this.arr[index].gender
      this.flag=true
      this.index=index
       
    }
  },
  computed:{

  }
}
</script>